/**
 * 选项卡控件
 */
define(function(require, exports, module) {
	var onPressed_ClassName = 'selected';
	// 登记的单击事件是整个 tan panel
	function onTabChooserPressHandler(e, _container){
		// 搜索 el 下的 li 元素，到容器为止
		var el 			= e.target, 
			container	= e.currentTarget || _container, 
			ul			= container.querySelector('ul'), 
			buttons		= ul.getChildren(), // tab候选栏strip
			tabs 		= container.querySelector('.content'),
			tabs 		= tabs.getChildren();

        !buttons.length && console.log('该控件未发现任何 strip。');

        // 拦截事件
        if(this.beforeSwitch && typeof this.beforeSwitch == 'function'){
			for(var nextIndex = 0, j = buttons.length; nextIndex < j; nextIndex++)
				if(buttons[nextIndex] == el)break; // 获取 nextIndex
			
        	if(this.beforeSwitch(this.currentIndex, nextIndex, j, buttons[nextIndex], tabs[nextIndex]) === false)return;
        }

		if (el.tagName == 'LI' && el.parentNode == ul){
			// 查找与 index 相等的 item 设置其高亮，否则移除样式。
			for(var btn, i = 0, j = buttons.length; i < j; i++){
				btn = buttons[i];
				// debugger;
				if(btn == el && btn.className.indexOf(onPressed_ClassName) == -1){ // 找到目标项
					var showTab = showTabByIndex(tabs, i);
					btn.addCls(onPressed_ClassName);
					this.currentIndex = i; // 保存当前游标
					
					// 是否已经渲染
					var isRendered_marked = ~showTab.className.indexOf('rendered');
					if(!isRendered_marked)
						showTab.addCls('rendered');

					if(this.afterSwitch && typeof this.afterSwitch == 'function')
						this.afterSwitch(this.currentIndex, btn, showTab);					
					if(!isRendered_marked && this.afterRender && typeof this.afterRender == 'function')
						this.afterRender(this.currentIndex, btn, showTab);
				}else if(btn == el && btn.className.indexOf(onPressed_ClassName) != -1){
					// alert(9)
					// 已在当前项
				}else if(btn.className.indexOf(onPressed_ClassName) != -1){
	                btn.removeCls(onPressed_ClassName);
				}
			}
		}
	}

	/**
	 * 查找匹配的 tab 并显示，否则隐藏。
	 * @param {Element[]} tabs
	 * @param {Number} index
	 */
	function showTabByIndex(tabs, index){
		var _style, displayState, showTab;
		for(var tab, i = 0, j = tabs.length; i < j; i++){
			tab = tabs[i], _style = tab.style, displayState = _style.display;
			
			// 当前 item 在父容器中的次序
			// 
			if(i == index && (displayState.indexOf('none') != -1 || tab.className.indexOf('hide') != -1)){
				if(displayState.indexOf('none') != -1)_style.display = 'block';
				if(tab.className.indexOf('hide') != -1)tab.removeCls('hide');
				showTab = tab;
			}else if(displayState.indexOf('none') == -1 || tab.className.indexOf('hide') == -1){
				if(displayState.indexOf('none') == -1)_style.display = 'none';
				if(tab.className.indexOf('hide') == -1)tab.addCls('hide');
			}
		}

		return showTab;
	}

	exports.tabs = {
		init : function(container){
			if(!container)throw '元素未被传入！';
			this.buttons	= container.querySelector('ul').getChildren(), // tab候选栏strip
			this.tabs 		= container.querySelector('.content').getChildren();
			onTabChooserPressHandler.scope = this;
			container.onClk(onTabChooserPressHandler.delegate(null, container));
		},
		showTabByIndex : function (index){
			for(var btn, i = 0, j = this.buttons.length; i < j; i++){
				btn = this.buttons[i];
				// 查找与 index 相等的 item 设置其高亮，否则移除样式。
				if(i == index){ 
					showTabByIndex(this.tabs, i);
					btn.addCls(onPressed_ClassName);
					this.currentIndex = i; // 保存当前游标
				}else{
		            btn.removeCls(onPressed_ClassName);
				}
			}
		},
		showTabByHash:function(){
			// 点击加上 hash
			this.afterSwitch = function(index, btn){
				var hashToken = btn.getAttribute('data-hashToken');
				location.hash = '#' + hashToken;
			}
			
			var hash = location.hash;
			if (hash){
				var token = hash.replace('#', '');
				for(var btn, i = 0, j = this.buttons.length; i < j; i++){
					btn = this.buttons[i];
					// 查找与 token 相符的 item 设置其高亮，否则移除样式。
					var reg = new RegExp('\\b' + token + '\\b');
					// 读取 data-hashToken 属性，不通过 className
					if(reg.test(btn.getAttribute('data-hashToken'))){ 
						showTabByIndex(this.tabs, i);
						btn.addCls(onPressed_ClassName);
						this.currentIndex = i; // 保存当前游标
					}else{
						btn.removeCls(onPressed_ClassName);
					}
				}
			}else{
				this.showTabByIndex(0);
			}
		}
	};

	/**
	 * 添加候选栏的按钮 @todo 应该扩展为 addTab()
     * @param {String} title
     * @param {Number} index
	 */
    function addButton(title, index) {
        var btn = document.createElement('button');
        btn.innerHTML = title;

        if (index === 0) {
            btn.addCls('y_pressed');
        }
        btn.addCls(index + '_switch_to_tab');
		if(index < this.stripEl.children.length){
			var insertBeforeEl = this.stripEl.children[index];
			this.stripEl.insertBefore(btn, insertBeforeEl);
		}else{
	        this.stripEl.appendChild(btn);
		}
    }
});